<template>
    <div id="parts task">
        <!-- 查询 -->
        <el-popover placement="right-start" width="670" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" :model="searchList" label-width="110px" class="demo-ruleForm">
                <el-form-item label="任务名称" style="margin-bottom: 5px;">
                    <el-input v-model="searchList.taskName" style="width: 100px;"></el-input>
                </el-form-item>
                <el-form-item label="任务创建人" style="margin-bottom: 5px;">
                    <el-select v-model="searchList.creator" filterable placeholder="请选择" style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务执行人" style="margin-bottom: 5px;">
                    <el-select v-model="searchList.performer" filterable placeholder="请选择" style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否每日任务" style="margin-bottom: 5px;">
                    <el-select v-model="searchList.isEveryDayTask" style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option :value="1" label="是"></el-option><el-option :value="0" label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务是否接收" style="margin-bottom: 5px;">
                    <el-select v-model="searchList.isReceived" style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option :value="1" label="是"></el-option><el-option :value="0" label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务是否开始" style="margin-bottom: 0;">
                    <el-select v-model="searchList.isStart" style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option :value="1" label="是"></el-option><el-option :value="0" label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务是否结束" style="margin-bottom: 0;">
                    <el-select v-model="searchList.isEnd" style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option :value="1" label="是"></el-option><el-option :value="0" label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务执行时间" style="margin-bottom: 0;">
                    <el-date-picker v-model="searchList.time" 
                    type="daterange" 
                    style="width: 255px;" 
                    range-separator="至" 
                    start-placeholder="开始时间" 
                    end-placeholder="结束时间" 
                    align="right"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-button type="primary" @click="searchData">提交</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>
        <!-- 任务列表 -->
        <el-table :data="dataList" :highlight-current-row="true" stripe border class="table-index" :height="tableHeight" style="width: 100%;" :header-cell-style="getRowClass"  v-loading="loading">
            <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
            <el-table-column prop="taskName" label="任务名称" sortable min-width="140"></el-table-column>
            <el-table-column prop="creatorName" label="任务创建人" sortable min-width="120"></el-table-column>
            <el-table-column prop="performerName" label="任务执行人" sortable min-width="120"></el-table-column>
            <el-table-column prop="finishDate" label="需完成时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="isReceived" label="任务是否接收" :formatter="formatNeedTrain" sortable min-width="140"></el-table-column>
            <el-table-column prop="receivedDate" label="任务接收创建时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="startDate" label="任务实际开始时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="endDate" label="任务实际结束时间" sortable min-width="170"></el-table-column>
            <el-table-column prop="taskResult" label="任务结果" :formatter="formatNeed2Train" sortable
                             min-width="130"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" width="75">
                <template slot-scope="scope">
                    <el-button @click="updateList(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>

        <!-- 详情信息 -->
        <el-dialog :title="dialog.title" width="90%" top="30px" :visible.sync="dialog.isShow" :close-on-click-modal="false">
            <el-tabs v-model="dialog.activeName" @tab-click="handleClick" style="padding-bottom: 15px;">
                <el-tab-pane v-if="dialog.formData.isEveryDayTask==='0'" label="任务信息" name="1" class="dialog1" :style="dialogHeightPane">
                    <el-form :inline="true" class="demo-form-inline" :model="dialog.formData" :rules="dialog.rules" label-position="right"
                             label-width="180px" style="margin-bottom: 0;">
                        <h3 class="dialog-plate-title"><span>1、基本信息</span></h3>
                        <el-form-item label="任务名称" prop="taskName">
                            <el-input v-model="dialog.formData.taskName" :disabled="true" class="width220"></el-input>
                        </el-form-item>
                        <el-form-item label="*完成时间">
                            <el-date-picker v-model="dialog.formData.finishDate" :disabled="true"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"
                            class="width220"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="*任务执行人所属部门">
                            <el-select v-model="dialog.formData.dept" :disabled="true" class="width220">
                                <el-option v-for="item in deptors" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="*任务执行人">
                            <el-select v-model="dialog.formData.performer" :disabled="true" class="width220">
                                <el-option v-for="item in performName" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="任务创建人">
                            <el-input v-model="dialog.formData.creatorName"  :disabled="true" class="width220"></el-input>
                        </el-form-item>
                        <el-form-item label="任务创建时间">
                            <el-input v-model="dialog.formData.createDate" :disabled="true" class="width220"></el-input>
                        </el-form-item>
                        <el-form-item label="任务说明">
                            <el-table :data="missionData" stripe border class="table-index" height="150" style="width: 99%;" :header-cell-style="getRowClass">
                                <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                                <el-table-column prop="time" label="填写时间" sortable min-width="170"></el-table-column>
                                <el-table-column prop="content" label="填写内容" sortable min-width="500">
                                     <template slot-scope="scope">
                                        <div v-html="scope.row.content"></div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                        <h3 class="dialog-plate-title" ><span>2、接收信息</span></h3>
                        <el-form-item label="任务是否接收">
                            <el-select v-model="dialog.formData.isReceived" :disabled="true" class="width220">
                                <el-option label="【空】" value="-1"></el-option>
                                <el-option label="否" value="0"></el-option>
                                <el-option label="是" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="接收创建时间">
                            <el-date-picker v-model="dialog.formData.receivedDate" :disabled="true" class="width220"  format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime" placeholder="选择日期时间"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="任务接收说明">
                            <el-table :data="missionReceiveData" stripe border class="table-index" height="150" style="width: 99%;" :header-cell-style="getRowClass">
                                <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                                <el-table-column prop="time" label="填写时间" sortable min-width="170"></el-table-column>
                                <el-table-column prop="content" label="填写内容"  sortable min-width="500">
                                    <template slot-scope="scope">
                                        <div v-html="scope.row.content"></div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                        <h3 class="dialog-plate-title"><span>3、开始信息</span></h3>
                        <el-form-item label="任务实际开始时间">
                            <el-date-picker v-model="dialog.formData.startDate" :disabled="true" class="width220"
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="开始创建时间">
                            <el-input v-model="dialog.formData.startCreateDate" :disabled="true" class="width220"></el-input>
                        </el-form-item>
                        <h3 class="dialog-plate-title"><span>5、结束信息</span></h3>
                        <el-form-item label="任务实际结束时间">
                            <el-date-picker v-model="dialog.formData.endDate" :disabled="true" class="width220" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束创建时间">
                            <el-input v-model="dialog.formData.endDateCreateDate" :disabled="true" class="width220"></el-input>
                        </el-form-item>
                        <el-form-item label="任务结果">
                            <el-select v-model="dialog.formData.taskResult" :disabled="true" class="width220">
                                <el-option label="【空】" value="-1"></el-option>
                                <el-option label="完成" value="1"></el-option>
                                <el-option label="未完成" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="自我评价">
                            <el-select v-model="dialog.formData.taskSelfEvaluation" :disabled="true" class="width220">
                                <el-option label="【空】" value="-1"></el-option>
                                <el-option label="差" value="1"></el-option>
                                <el-option label="良好" value="2"></el-option>
                                <el-option label="优秀" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="自我评价说明">
                            <quill-editor class="task" v-model="dialog.formData.taskSelfDescription" :disabled="true"></quill-editor>
                        </el-form-item>
                        <h3 class="dialog-plate-title"><span>6、复核信息</span></h3>
                        <el-form-item label="任务是否复核">
                            <el-select v-model="dialog.formData.isReviewTask" :disabled="true" class="width220">
                                <el-option label="【空】" value="-1"></el-option>
                                <el-option label="否" value="0"></el-option>
                                <el-option label="是" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="复核结果">
                            <el-select v-model="dialog.formData.reviewResult" :disabled="true" class="width220">
                                <el-option label="【空】" value="-1"></el-option>
                                <el-option label="通过" value="1"></el-option>
                                <el-option label="不通过" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="复核创建时间">
                            <el-input v-model="dialog.formData.reviewTime"  :disabled="true" class="width220"></el-input>
                        </el-form-item>
                        <el-form-item label="任务复核说明">
                            <quill-editor class="task" v-model="dialog.formData.reviewDescription" :disabled="true" style="padding-right: 10px;"></quill-editor>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane :label="dialog.formData.isEveryDayTask>1?dialog.formData.taskName:'4、过程信息'" name="2" :style="dialogHeightPane">
                    <el-table :data="processStateData" stripe border class="table-index" :height="dialogTableHeight" style="width: 100%;" :header-cell-style="getRowClass">
                        <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                        <el-table-column prop="taskDescription" label="任务说明" sortable min-width="280">
                            <template slot-scope="scope">
                                <div v-html="scope.row.taskDescription"></div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startDate" label="开始时间" sortable min-width="170"></el-table-column>
                        <el-table-column prop="endDate" label="结束时间" sortable min-width="170"></el-table-column>
                        <el-table-column prop="creatTime" label="创建时间" sortable min-width="170"></el-table-column>
                        <el-table-column prop="managerName" label="主管" sortable min-width="100"></el-table-column>
                        <el-table-column prop="managerAdvice" label="主管意见" sortable min-width="200"></el-table-column>
                        <el-table-column prop="adviceCreattime" label="创建时间" sortable min-width="170"></el-table-column>
                        <el-table-column fixed="right" label="操作" sortable align="center" width="75">
                            <template slot-scope="scope">
                                <el-button @click="updateProcessStateList(scope.row)" type="text" size="small">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="附件" name="3" :style="dialogHeightPane">
                    <!-- 附件列表 -->
                    <el-table :data="enclosureList" stripe border class="user-table" :height="dialogTableHeight" style="width: 99%;" :header-cell-style="getRowClass">
                        <el-table-column fixed type="index" label="*" sortable min-width="40"></el-table-column>
                        <el-table-column prop="fileName" label="文件名称" sortable min-width="300"></el-table-column>
                        <el-table-column prop="uploadPersonName" label="文件上传人" sortable min-width="130"></el-table-column>
                        <el-table-column prop="uploadTime" label="文件上传时间" sortable min-width="170"></el-table-column>
                        <el-table-column prop="fileDesc" label="文件描述" sortable min-width="400"></el-table-column>
                        <el-table-column fixed="right" label="操作" sortable align="right" min-width="80">
                            <template slot-scope="scope">
                                <el-button @click="downloadAppendix(scope.row)" type="text" size="small">下载
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>

        <!-- 过程状态信息 -->
        <el-dialog :title="dialogProcessStateTitle" width="900px" center :visible.sync="isProcessStateDialog" :close-on-click-modal="false" style="padding-bottom: 15px;">
            <h3 class="dialog-plate-title"><span>基本信息</span></h3>
            <el-form v-model="dialogProcessStateList" label-position="right" label-width="180px"
                     style="margin-bottom: 0;">
                <el-form-item label="*任务说明">
                    <el-input v-model="dialogProcessStateList.taskDescription" disabled type="textarea" mini="middle"
                              style='width: 88%;'></el-input>
                </el-form-item>
            </el-form>
            <el-form :inline="true" class="demo-form-inline" v-model="dialogProcessStateList" label-position="right" label-width="180px">
                <el-form-item label="是否实时时间">
                    <el-select v-model="dialogProcessStateList.isNowTime"  disabled  >
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="*开始时间" class="start-date"><el-input v-model="dialogProcessStateList.startDate" disabled ></el-input></el-form-item>
                <br/>
                <el-form-item label="结束时间" class="start-date"><el-input v-model="dialogProcessStateList.endDate" disabled></el-input></el-form-item>
                <el-form-item label="创建时间" class="start-date">
                    <el-input v-model="dialogProcessStateList.creatTime" disabled></el-input>
                </el-form-item>
            </el-form>
            <h3 class="dialog-plate-title"><span>主管评审</span></h3>
            <el-form :inline="true" class="demo-form-inline" v-model="dialogProcessStateList" label-position="right"
                     label-width="180px">
                <el-form-item label="主管">
                    <el-input v-model="dialogProcessStateList.managerName"
                              disabled></el-input>
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-input v-model="dialogProcessStateList.adviceCreattime" disabled></el-input>
                </el-form-item>
            </el-form>
            <el-form v-model="dialogProcessStateList" label-position="right" label-width="180px"
                     style="margin-bottom: 0;">
                <el-form-item label="主管意见">
                    <el-input v-model="dialogProcessStateList.managerAdvice"
                              disabled type="textarea" mini="middle"
                              style='width: 88%;'></el-input>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import {quillEditor} from 'vue-quill-editor';
    import baseHttp from '@/axios/baseHttp.js'
    import api from '@/axios/api.js'
    import creatingValueApi from '@/axios/creatingValueApi.js'
    export default {
        name: "",
        components: {quillEditor},
        data() {
            return {
                tokenId: sessionStorage.getItem("tokenId"),
                menuId: sessionStorage.getItem('menuId'),
                loading:false,
                pagination:{
                    currentPage: 1,
                    pageSize: 10,
                    total:0

                },
                activeName: '1',
                performName: [],
                deptors: [],
                users: [],
                tableHeight: document.documentElement.clientHeight - 160,
                dataList: [],
                searchList:{
                    taskName:null,
                    creator:null,
                    performer:null,
                    startfinishDate:"",
                    endfinishDate:"",
                    isReceived:null,
                    isStart:null,
                    isEnd:null,
                    isEveryDayTask:null,
                    time:[],
                },
                dialog:{
                    title:'',
                    isShow:false,
                    formData:{},
                    activeName:'',
                    rules:{
                        taskName:[{required: true, message: '请输入任务名称', trigger: 'blur' }],
                        finishDate:[{required: true, message: '请输入任务名称', trigger: 'blur' }],
                        dept:[{required: true, message: '请输入任务名称', trigger: 'blur' }],
                        performer:[{required: true, message: '请输入任务名称', trigger: 'blur' }]
                    } 
                },
                dialogHeightPane: {
                    height: (document.documentElement.clientHeight - 180) + 'px',
                    overflowY: 'auto'
                },
                dialogTableHeight: document.documentElement.clientHeight - 200,
                isEveryDayTask: true,
                //附件列表
                enclosureList: [],
                //过程状态信息
                isProcessStateDialog: false,
                dialogProcessStateTitle: '',
                dialogProcessStateList: {
                    adviceCreattime: "",
                    creatTime: "",
                    creator: "",
                    endDate: "",
                    id: "",
                    manager: "",
                    managerAdvice: "",
                    isNowTime: "",
                    managerName: "",
                    startDate: "",
                    taskDescription: "",
                    taskId: "",
                },
                processStateData: [],
                isProcessStateSubmitBtn: true,

                //任务接收说明
                missionData:[],
                missionReceiveData: [],

                //使用说明
                jurisdiction:{
                    updateSoftDescription:true
                },
                isInstructionsDialog:false,
                dialogInstructionsBtn: true,
                instructionsHeight: {
                    height: (document.documentElement.clientHeight - 230) + 'px',
                    overflowY: 'auto'
                },
                instructionsQuillHeight: {
                    height: (document.documentElement.clientHeight - 300) + 'px'
                },
                isInstructionsBtn:true,
                instructions:{
                    content: '',
                    id: '',
                    type: '',
                },

            };
        },
        created() {
            this.getData();
            this.getDepts();
            this.getUsers();
        },
        methods: {
            /**获取所有用户列表 */
            getUsers(){
                let self = this;
                baseHttp.getAllUsers().then(res=>{
                     self.users = res.content;
                })
            },
            /**获取所有执行部门 */
            getDepts() {
                let self = this;
                api.selectDepts().then(res=>{
                    self.deptors = res.content;
                })
            },
            /**根据部门id获取任务执行人列表 */
            getPerform(id) {
                let self = this;
                api.taskPerformPerson(id).then(res=>{
                     self.performName = res.content;
                })
            },
            getData() {
                let self = this;
                let postData={
                    currentPage:self.pagination.currentPage,
                    pageSize:self.pagination.pageSize,
                    taskName:self.searchList.taskName,
                    creator:self.searchList.creator,
                    performer:self.searchList.performer,
                    startfinishDate:self.searchList.time[0]?self.searchList.time[0]:'',
                    endfinishDate:self.searchList.time[1]?self.searchList.time[1]:'',
                    isReceived:self.searchList.isReceived != '1' ? null : self.searchList.isReceived,
                    isStart:self.searchList.isStart != '1' ? null : self.searchList.isStart,
                    isEnd:self.searchList.isEnd != '1' ? null : self.searchList.isEnd,
                    isEveryDayTask:self.searchList.isEveryDayTask != '1' ? null : self.searchList.isEveryDayTask,
                }
                self.loading = true;
                creatingValueApi.allTaskManager(postData).then(res=>{
                    self.dataList = res.content.records;
                    self.pagination.total = res.content.total;
                    self.loading = false;
                },error=>{
                    self.loading = false;
                })
            },
            /**点击搜索查询 */
            searchData(){
                this.getData();
            },
             /**切换分页条数 */
            handleSizeChange(size) {
                this.pagination.pagesize = size;
                this.getData();
            },
            /**切换分页页码 */
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.getData();
            },
            updateList(row) {
                let self = this;
                self.dialog.title="任务详情"
                self.dialog.isShow = true;
                self.dialog.activeName = row.isEveryDayTask>0?'2':'1'
                self.dialog.formData=JSON.parse(JSON.stringify(row));
                self.dialog.formData.dept = Number(self.dialog.formData.dept);
                self.dialog.formData.performer = Number(self.dialog.formData.performer);
                self.dialog.formData.isReceived = self.dialog.formData.isReceived ? self.dialog.formData.isReceived.toString():'';
                switch(self.dialog.formData.isEveryDayTask){
                    case '0':
                        self.getMissionData();
                        self.getMissionReceiveData();
                        self.getPerform(self.dialog.formData.dept);
                        break;
                    case '1':
                        self.getProcessStateData();
                        break;
                    case '2':
                        self.getProcessStateData();
                        break;
                    case '3':
                        self.getProcessStateData();
                        break;
                }
                this.currentPage = 1;
                this.activeName = row.isEveryDayTask == 1 ? '2' : '1';
                this.isEveryDayTask = row.isEveryDayTask == 1 ? true : false;
            },

            //附件
            getEnclosureData() {
                let self = this;
                creatingValueApi.getEnclosureList(self.dialog.formData.id).then(res=>{
                    self.enclosureList = res.content;
                })
            },

            //过程状态信息
            getProcessStateData() {
                let self = this;
                creatingValueApi.taskManagerdetail(self.dialog.formData.id ).then(res=>{
                    self.processStateData = res.content;
                })
            },
            updateProcessStateList(row) {
                this.isProcessStateDialog = true;
                this.dialogProcessStateTitle = '查看';
                this.dialogProcessStateList = row;
            },

            //任务说明
            getMissionData() {
                let self = this;
                creatingValueApi.getTaskInfoList(self.dialog.formData.id ).then(res=>{
                      self.missionData = res.content;
                })
            },
            //任务接收说明
            getMissionReceiveData() {
                let self = this;
                creatingValueApi.getTaskReceiveList(self.dialog.formData.id ).then(res=>{
                     self.missionReceiveData = res.content;
                })
            },
            /**点击切换tab */
            handleClick(tab, event) {
                switch(tab.name){
                    case "2":
                        this.getProcessStateData();
                    break;
                    case "3":
                        this.getEnclosureData()
                    break;
                }
            },
            downloadAppendix(row){
                 window.location.href = baseHttp.taskManagerAttchmentDownload(row.id);
            }
        }
    }
</script>

<style scoped>

    #parts .el-table--small {
        font-size: 13px;
    }

    #parts .el-table .cell,
    #parts .el-table th div {
        padding-left: 0;
        padding-right: 0;
    }

    #parts .el-tab-pane.dialog1 .el-form {
        margin-bottom: 30px;
    }

    .task .ql-container {
        min-height: 200px;
    }
</style>
